<script lang="ts" setup>
import FormatFormVue from "@/Components/FormatForm.vue";
import CreateRouterVue from "./Components/CreateRouter.vue";
import UpdateRouterVue from "./Components/UpdateRouter.vue";

import { ref, reactive, onBeforeMount, watch } from "vue";
import { ElTable, Action } from "element-plus";
import { Plus, Edit, Delete, Search } from "@element-plus/icons-vue";
import { RouterConfigAPI } from "@/Api";

const form = reactive<RouterConfig.Search>({
   label: ""
});
const formOptions = reactive<FormOptions<RouterConfig.Search>>({
   label: {
      type: "text",
      placeholder: "菜单名称"
   }
});
const tableData = ref<RouterConfig.Table[]>();
const loadingTable = ref(false);
const showCreateRouter = ref(false);
const showUpdateRouter = ref(false);
const actionRouter = ref<RouterConfig.Table>();

watch([showCreateRouter, showUpdateRouter], async value => {
   if (!value[0] || !value[1]) await submit();
});

async function submit() {
   loadingTable.value = true;

   try {
      const { code, data } = await RouterConfigAPI.Search();
      if (code === 200) {
         tableData.value = data;
      }
   } catch (error) {
      console.log("error", error);
   }

   loadingTable.value = false;
}

async function handlerDelete(id: string) {
   try {
      ElMessageBox.confirm("删除当前路由信息?", "警告", {
         confirmButtonText: "确定",
         type: "warning",
         callback: async (action: Action) => {
            if (action === "confirm") {
               const { code } = await RouterConfigAPI.Delete({ id });
               if (code === 200) {
                  ElMessage.success("删除成功");
                  await submit();
               }
            }
         }
      });
   } catch (error) {
      console.log("error", error);
   }
}

function updateRouter(info: RouterConfig.Table) {
   actionRouter.value = info;
   showUpdateRouter.value = true;
}

onBeforeMount(async () => {
   await submit();
});
</script>

<template>
   <div class="main">
      <div class="content">
         <FormatFormVue :form="form" :form-options="formOptions">
            <template #button>
               <el-button :icon="Plus" type="primary" @click="showCreateRouter = true"> 添加 </el-button>
            </template>
         </FormatFormVue>
         <div class="tabBox shadowCard">
            <el-table
               v-loading="loadingTable"
               :data="tableData"
               stripe
               border
               default-expand-all
               highlight-current-row
               empty-text="暂无数据"
               tooltip-effect="light"
               row-key="id">
               <el-table-column prop="meta_label" label="菜单名称" />
               <el-table-column prop="path" label="显示路径" />
               <el-table-column prop="name" label="路由名称" />
               <el-table-column prop="component" label="组件路径" />
               <el-table-column label="操作" width="140" align="center">
                  <template #default="{ row }: { row: RouterConfig.Table }">
                     <el-button-group>
                        <el-link :icon="Edit" type="primary" @click="updateRouter(row)"> 编辑 </el-link>
                        <el-link :icon="Delete" type="danger" @click="handlerDelete(row.id)"> 删除 </el-link>
                     </el-button-group>
                  </template>
               </el-table-column>
            </el-table>
         </div>
      </div>

      <CreateRouterVue v-model="showCreateRouter" :router-tree="tableData" />
      <UpdateRouterVue v-model="showUpdateRouter" :router-tree="tableData" :router-info="actionRouter" />
   </div>
</template>

<style lang="scss" scoped>
.main {
   width: 100%;
   height: 100%;
}

.content {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}
.tabBox {
   flex: 1;
   width: 100%;
   position: relative;
   box-sizing: border-box;
   padding: 15px;
   .el-table {
      position: absolute;
      width: calc(100% - 30px);
      height: calc(100% - 30px);
      .el-link {
         margin-inline: 5px;
      }
   }
}
</style>
